import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';
import ThemeToggle from '../components/ui/ThemeToggle';

const LoginPage: React.FC = () => {
  const [identifier, setIdentifier] = useState('');
  const [password, setPassword] = useState('');
  const { login, isLoading, error, clearError } = useAuth();
  const navigate = useNavigate();

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    
    if (!identifier.trim() || !password.trim()) {
      return;
    }

    try {
      await login(identifier, password);
      navigate('/');
    } catch (error) {
      // 错误已经在AuthContext中处理
    }
  };

  const handleInputChange = () => {
    if (error) {
      clearError();
    }
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-base-200 to-base-300 flex items-center justify-center p-4">
      <div className="absolute top-4 right-4">
        <ThemeToggle />
      </div>
      
      <div className="card w-full max-w-md bg-base-100 shadow-xl">
        <div className="card-body">
          <h1 className="card-title text-2xl font-bold text-center text-base-content site-title mb-6">登录</h1>
          
          {error && (
            <div className="alert alert-error mb-4">
              <svg xmlns="http://www.w3.org/2000/svg" className="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
              <span>{error}</span>
            </div>
          )}
          
          <form onSubmit={handleSubmit} className="space-y-4">
            <div className="form-control">
              <label className="label" htmlFor="identifier">
                <span className="label-text">用户名或邮箱</span>
              </label>
              <input
                type="text"
                id="identifier"
                value={identifier}
                onChange={(e) => {
                  setIdentifier(e.target.value);
                  handleInputChange();
                }}
                placeholder="请输入用户名或邮箱"
                className="input w-full"
                required
                disabled={isLoading}
              />
            </div>
            
            <div className="form-control">
              <label className="label" htmlFor="password">
                <span className="label-text">密码</span>
              </label>
              <input
                type="password"
                id="password"
                value={password}
                onChange={(e) => {
                  setPassword(e.target.value);
                  handleInputChange();
                }}
                placeholder="请输入密码"
                className="input w-full"
                required
                disabled={isLoading}
              />
            </div>
            
            <button 
              type="submit" 
              className={`btn btn-primary w-full ${isLoading ? 'loading' : ''}`}
              disabled={isLoading || !identifier.trim() || !password.trim()}
            >
              {isLoading ? '登录中...' : '登录'}
            </button>
          </form>
          
          <div className="divider"></div>
          
          <div className="text-center space-y-2">
            <p className="text-sm">
              还没有账户？ <Link to="/register" className="link link-primary">立即注册</Link>
            </p>
            <p className="text-sm">
              <Link to="/" className="link link-secondary">返回首页</Link>
            </p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default LoginPage;